<template>
  <ElCard class="box-card blog-editor">
    <div class="blog-editor--title">
      <h3>标题</h3>
      <ElInput ref="titleCom" v-model="title" placeholder="请输入文章标题" />
    </div>
    <!-- 修改数据, 直接使用ref dom获取不到最新数据, 需要等都下一个nextTick队列才能获取 -->

    <!-- <button @click="forceUpdate">{{force.name}}</button>
     <button @click="nextTick">点击修改value</button>
    <input ref="input" type="text" v-model="val"> -->

    <div class="blog-editor--content">
      <h3>内容</h3>
      <div id="blog-editor--wrap" />
    </div>

    <!-- TODO 添加分类选项 -->
    <!-- 
      选项卡分类制作,
      1. 在首先获取数据, 如果获取, create阶段, 发起请求
      2. 根据数据渲染标签内容
      3. 点击切换, 获取columnid, 作为文章数据上传给服务端
    
     -->

    <div class="blog-editor--columns">
      <h3>文章分类</h3>
      <ElRadioGroup v-model="column" size="default">
        <!-- v-modal与label数值绑定, label与content绑定, content可以使用label, 也可以使用自定义内容, 所以label的功效只需要 为v-modal切换内容是更改columnId -->
        <ElRadioButton v-for="(item, idx) of columns" :key="idx" :value="item.id">{{ item.name }}</ElRadioButton>
      </ElRadioGroup>
    </div>
    <div class="blog-editor--button">
      <ElButton type="primary" @click="subArticle">提交</ElButton>
      <ElButton type="info" @click="reset">重置</ElButton>
    </div>
  </ElCard>
</template>

<script setup lang="ts">
import { ElNotification, ElInput } from 'element-plus'
import { ref, onMounted, onBeforeUnmount, withDefaults } from 'vue'
import { useRouter } from 'vue-router'

import $http from '@/api/http'
import EditorClass from '@/config/editor.config'
let props = withDefaults(defineProps<{ columnId: string }>(), {columnId: ''})
let router = useRouter()
let title = ref<string>('')
let content = ref<string>()
let columns = ref<any>([])
let column = ref<string>('')
let titleCom = ref<typeof ElInput | null>(null)
let editor = null
// eslint-disable-next-line vue/no-ref-object-destructure
onMounted(() => {
  getColumns()
  editor = new EditorClass({ wrap: '#blog-editor--wrap' })
  editor.config.onchange = (newHtml) => {
    content.value = newHtml
  }
})
onBeforeUnmount(() => {
  // 调用销毁 API 对当前编辑器实例进行销毁
  editor.destroy()
  editor = null
})
async function getColumns() {
  try {
    let result = await $http({ type: 'columns' })
    columns.value = result.data.list
    if (props.columnId && props.columnId?.trim().length !== 0) {
      column.value = props.columnId
      return false
    }
    column.value = columns.value[0].id
  } catch (err) {
    console.log(err)
    ElNotification({
      title: '错误',
      message: '文章分类为被获取到',
      type: 'error',
    })
  }
}
async function subArticle() {
  console.log(title.value)
  if (title.value?.trim().length === 0) {
    ElNotification({
      title: '提交失败',
      message: '请填写文章标题',
      type: 'error',
    })
    return
  }
  if (content.value.trim().length === 0) {
    ElNotification({
      title: '提交失败',
      message: '请填写文章内容',
      type: 'error',
    })
    // 使用封装成型的组件方法, 使用this.$refs调用
    titleCom.value.focus()
    return
  }
  try {
    // 使用正则, 将第一张上传的图片切出来, 这里要避免代码块传进来的src
    /*
          上传图片失败, 查看图片路径, 发现不对, 看服务端, 如果没有传图片地址, 就使用默认图片, 但路径不对说明上传了图片地址, 看上传的图片地址提交数据哪里, upload or 提交请求的地方, 发现提交请求是对content使用正切, src的正切, 赋值content能内容, 发现切到代码块的内容, 所以将正切设置为更严格写, 添加img 这个字符, 
          TODO, 更好的正切方法或者获取图片的方法, documenthtml复用,querySelector查找
        
        */
    let div = document.createElement('div')
    div.innerHTML = content.value
    let coverUrl = div.querySelector('img')?.src ?? undefined
    div.remove()
    // let coverUrl = this.content.match(/<img src="([^'"]*)"/)?.[1];
    // 使用JSON.stringify将对象为undefined的属性去除
    let result = await $http({
      type: 'postArticle',
      data: JSON.parse(
        JSON.stringify({ title: title.value, content: content.value, cover: coverUrl, columns: column.value }),
      ),
    })
    router.push({ name: 'index' })
    console.log(result)
    ElNotification({
      title: '成功',
      message: '文章提交成功',
      type: 'success',
    })
  } catch (err) {
    ElNotification({
      title: '提交失败',
      message: err.message,
      type: 'error',
    })
  }
}
function reset() {
  editor.txt.clear()
}
</script>
<style lang="less">
@import url('@/assets/css/variable.less');

.blog-editor--wrap {
  box-sizing: border-box;
  width: 100%;
}

.blog-editor.el-card {
  padding: 0 @padding-space * 3;
  background-color: @bg-theme-color;

  & h3 {
    padding: @padding-space * 2 0;
    font-size: 20px;
  }
}

.blog-editor--title {
  & .el-input__inner {
    font-size: 18px;
    line-height: 30px;
  }
}

.blog-editor--button {
  display: flex;
  justify-content: space-around;
  padding: @padding-space * 2 0;

  & .el-button {
    width: 48%;
    font-size: 18px;
  }
}

.blog-editor--columns {
  & .el-radio-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 60%;
  }

  & .el-radio-button {
    margin-left: @padding-space * 2;
  }
}
</style>
